<template>
  <div>
    <el-input
        v-model="search"
        prefix-icon="el-icon-search"
        placeholder="输入书名中的关键字进行搜索"
        style="width: 30%"/>
    <el-table :data="bookList.filter(data =>  data.name.includes(search))"
               style="width: 100%">
      <el-table-column type="index" label="id"></el-table-column>
      <el-table-column label="图书图片" border width="180">
        <template slot-scope="scope">
          <el-image :src="scope.row.url" style="width: 120px"></el-image>
        </template>
      </el-table-column>

      <el-table-column label="书名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="定价" width="120">
        <template slot-scope="scope">
          <input type="text" style="width: 90px"
                 v-model="scope.row.fixedPrice" v-show="scope.row.iseditor"/>
          <span style="margin-left: 10px"
                v-show="!scope.row.iseditor">{{ scope.row.fixedPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="折扣价" width="120">
        <template slot-scope="scope">
          <input type="text" style="width: 90px"
                 v-model="scope.row.discountPrice" v-show="scope.row.iseditor"/>
          <span style="margin-left: 10px"
                v-show="!scope.row.iseditor">{{ scope.row.discountPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="销量" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.saleCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="库存" width="120">
        <template slot-scope="scope">
          <input type="text" style="width: 90px"
                 v-model="scope.row.saveCount" v-show="scope.row.iseditor"/>
          <span v-show="!scope.row.iseditor">{{ scope.row.saveCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" size="mini"
                     style="margin-left: 10px"
                     @click="edit(scope.row, scope.$index)">编辑
          </el-button>

          <el-button type="success" size="mini"
                     @click="save(scope.row)">保存
          </el-button>

          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='等一下'
              icon="el-icon-info"
              icon-color="red"
              title="删除操作将下架此商品，确定删除？"
          >
            <el-button slot="reference" type="danger" size="mini"
                       style="margin-left: 10px"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        style="margin: 10px auto 0;width: 320px"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="page"
        :pager-count="5"
        :total="total"
          @current-change="change">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      page:1,
      pageSize:5,
      total:0,
      // 输入框搜索出来的值
      search: '',
      bookList: []
    }
  },
  created(){
    let url = 'http://localhost:8080/products/list?page='+this.page+'&pageSize='+this.pageSize
    axios.get(url).then((response) => {
      let json = response.data
      if (json.state==20000) {
        console.log(json.data)
        this.bookList = json.data.list
        this.page = json.data.pageNum
        this.pageSize = json.data.pageSize
        this.total = json.data.totalCount
      }
    })
  },
  methods: {
    edit(row, index) {
      console.log(row.iseditor)
      row.iseditor = true;
    },
    save(row, index) {
      row.iseditor = false;
      let url = 'http://localhost:8080/products/update'
      axios.post(url,row).then((response) => {
        let json = response.data
        if (json.state==20000) {
          this.$message.success('保存成功');
        }
      })
    },
    handleDelete(index,row) {
      console.log(row)
      let url = 'http://localhost:8080/products/delete/'+row.id
      axios.get(url).then((response) => {
        let json = response.data
        if (json.state==20000) {
          this.$message.success('删除成功');
          location.reload()
        }
      })
    },
    change(value){
      this.page=value
      let url = 'http://localhost:8080/products/list?page='+this.page+'&pageSize='+this.pageSize
      axios.get(url).then((response) => {
        let json = response.data
        if (json.state==20000) {
          console.log(json.data)
          this.bookList = json.data.list
          this.page = json.data.pageNum
          this.total = json.data.totalCount
        }
      })
    }
  },
}
</script>

<style scoped>

</style>